/*
主题：

*/
@import "../assets/fonts/index.scss";
@import "../themes/dark.scss";//默认主题颜色
@import "../themes/default.scss";//默认黑白主题

$themes:(
  light: (
    bg-color: $background-color,
    font-color: $text-color,
    link-color: $secondary-color,
    icon-home: url('~@/assets/img/icon/lightHomeIcon.svg'),
    icon-filter: url('~@/assets/img/icon/lightFilter.png'),
  ),
  dark: (
    bg-color: $background-color-dark,
    font-color: $text-color-dark,
    link-color: $secondary-color-dark,
    icon-home: url('~@/assets/img/icon/darkHomeIcon.svg'),
    icon-filter: url('~@/assets/img/icon/darkFilter.png'),
  )
);

// 从主题色map中取出对应颜色

@function themed($key) {
  @return map-get($theme-map, $key);
}
 
// 切换主题时 获取不同的主题色值
@mixin themeify {
  @each $theme-name,$theme-map in $themes {
    // !global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    // 判断html的data-theme的属性值  #{}是sass的插值表达式
    // & sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}
 
// 获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color) !important;
  }
}
 
// 获取背景图片
@mixin background_image($color) {
  @include themeify {
    background-image: themed($color) !important;
  }
}
 
// 获取图片
@mixin content($color) {
  @include themeify {
    content: themed($color) !important;
  }
}
 
// 获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color) !important;
  }
}
 
// 获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color) !important;
  }
}


*{
  margin: 0px;
  padding: 0px;
}

/* 全局颜色变量 */  
$primary-color: #42b983;  
$secondary-color: #666;  
$text-color: #333;  
$background-color: #f5f5f5;  
$border-color: #ddd;  
$success-color: #5cb85c;  
$warning-color: #f0ad4e;  
$danger-color: #d9534f;  
  
/* 字体大小变量 */  
$font-size-small: 12px;  
$font-size-normal: 14px;  
$font-size-large: 16px;  
$font-size-xlarge: 18px;  
  
/* 边框半径 */  
$border-radius: 4px;  
  
/* 间距变量 */  
$spacing-small: 8px;  
$spacing-normal: 16px;  
$spacing-large: 24px;
  
/* 混合：用于清除浮动 */  
@mixin clearfix {  
  &::after {  
    content: "";  
    display: table;  
    clear: both;  
  }  
}  
  
/* 混合：用于设置中心点 */  
@mixin center {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}  
  
/* 混合：用于设置响应式字体大小 */  
@mixin responsive-font($min-size, $max-size) {  
  font-size: $min-size;  
  @media (min-width: 768px) {  
    font-size: calc(#{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - 320px) / (768 - 320)));  
  }  
  @media (min-width: 768px) and (max-width: 1024px) {  
    font-size: calc(#{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - 768px) / (1024 - 768)));  
  }  
  @media (min-width: 1024px) {  
    font-size: $max-size;  
  }  
}  
  
/* 函数：用于计算rem */  
@function px2rem($px) {  
  $rem: 37.5px; // 假设设计稿宽度为375px  
  @return ($px / $rem) + rem;  
}  
  
/* 全局样式 */  
body {  
  font-family: Arial, sans-serif;  
  color: $text-color;  
  background-color: $background-color;  
  line-height: 1.6;  
}  
  
/* 通用的容器样式 */  
.container {  
  width: 100%;  
  max-width: 1200px;  
  margin: 0 auto;  
  padding: 0 $spacing-normal;  
  @include clearfix;  
}  
  
/* 通用的按钮样式 */  
.btn {  
  display: inline-block;  
  padding: $spacing-small $spacing-normal;  
  border-radius: $border-radius;  
  border: 1px solid transparent;  
  cursor: pointer;  
  text-align: center;  
  &:hover {  
    opacity: 0.8;  
  }  
  &.btn-primary {  
    background-color: $primary-color;  
    color: #fff;  
  }  
  &.btn-success {  
    background-color: $success-color;  
    color: #fff;  
  }  
  &.btn-warning {  
    background-color: $warning-color;  
    color: #fff;  
  }  
  &.btn-danger {  
    background-color: $danger-color;  
    color: #fff;  
  }  
}  
  
/* 通用的表单样式 */  
.form-control {  
  display: block;  
  width: 100%;  
  padding: $spacing-small $spacing-normal;  
  border: 1px solid $border-color;  
  border-radius: $border-radius;  
  font-size: $font-size-normal;  
  &:focus {  
    border-color: $primary-color;  
    outline: none;  
  }  
}